<template>
  <div>
    <el-steps :active="active" finish-status="success" :align-center="alignCenter">
      <el-step
        v-for="step in steps"
        :key="step.index"
        :title="step.title"
        icon="el-icon-loading"
        @click.native="handleClick(step.index)"
      />
    </el-steps>
    <el-divider />
    <base-info v-if="active === 0" />
    <hpi v-if="active === 1" />
    <past-medical-history v-if="active === 2" />
    <base-line-case v-if="active === 3" />
    <check v-if="active === 4" />
    <baseline-treat v-if="active === 5" />
  </div>
</template>

<script>
import BaseInfo from './steps/baseInfo.vue'
import Hpi from './steps/hpi.vue'
import PastMedicalHistory from './steps/pastMedicalHistory.vue'
import BaseLineCase from './steps/baseLineCase.vue'
import check from './steps/check.vue'
import BaselineTreat from './steps/baselineTreat.vue'

export default {
  components: {
    BaseInfo,
    Hpi,
    PastMedicalHistory,
    BaseLineCase,
    check,
    BaselineTreat
  },
  data() {
    return {
      active: 0,
      alignCenter: true,
      steps: [
        {
          title: '基本信息',
          index: 0
        },
        {
          title: '现病史',
          index: 1
        },
        {
          title: '既往史',
          index: 2
        },
        {
          title: '基线情况',
          index: 3
        },
        {
          title: '检查与诊断',
          index: 4
        },
        {
          title: '基线治疗',
          index: 5
        }
      ]
    }
  },
  methods: {
    handleClick(v) {
      this.active = v
    }
  }
}
</script>

<style>

</style>
